import Vue from 'vue'
import VueRouter from 'vue-router' //导入自己的Router路由 
Vue.use(VueRouter)//vue.use声明一下
/****
 * 1 $route.params.id不是router
 * 2 子路由要写router-view  路径不要写/
 * 3 路由的时候要加s routes==!router(x错误)
 * 4 在写路由components的一定要写复数 加s
 * 5 url 传递参数时to="/params/111/222" 
 *   读取参数时  {{$route.params.aaa}}
 *   {{JSON.stringify($route,null,2)}} <br>
 * 6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
 * 7 a链接上色==》 a.router-link-active 【append  exact 作用】
 * 8 append =url后面无限叠加  exact==绝对路径
 * 9 query path:'/users/woss' 一对
 * 10 name params 是一对的
 * 
 */

let zyi=`
1 $route.params.id不是router {{$route.name}} <br>
2 :to==>子路由要写router-view  children:[]路径不要写/ <br>
3 路由的时候要加s routes==!router(x错误)<br>
4 在写路由components的一定要写复数 加s <br>
5 url 传递参数时to="/params/111/222" 
  读取参数时  {{$route.params.aaa}}
  '{{JSON.stringify($route,null,2)}} '<br>
6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空 <br>
7 a链接上色==》 a.router-link-active <br>
8 append =url后面无限叠加  exact==绝对路径 <br>
9 query path:'/users/woss' 一对 <br>
10 name params 是一对的 <br>
11 监听路由 watch $route from.path==‘/a’ <br>
12 data(){} 绑定里面的值 都必须要 :name 动画名来绑定 <br>
13 vue里面看错误从下面往上看
14 监听路由beforeEnter(to,from,next) 里面一定要写next()
`


const home={template:`<div>
        <h2>heome</h2>
        <p>this is home</p>
     </div>`}

const parent={template:`<div> 
     <h2>parent</h2>
     <p>this is parent</p>
  </div>`}
  
  const parent404={template:`<div> 
     <h2>parent</h2>
     <p>错误 parent404</p>
  </div>`,
  beforeRouteEnter: (to, from, next) => {
    console.log(to)
    console.log(from)
    // console.log(next)
    // next(false)
    next()
  },
  beforeRouteLeave: (to, from, next) => {
    console.log(to)
    console.log(from)
    // console.log(next)
    // next(false)
    next()
  }

}

const router=new VueRouter({
  mode:'history',
    base:'__dirname',//当前的本地路径   
    routes:[
       {path:'/',name:'home',component:home},
       {path:'/parent',name:'parent', component:parent,
        // beforeEnter: (to, from, next) => {
        //   console.log(to)
        //   console.log(from)
        //   // console.log(next)
        //   next(false)
        //   // next({path:'/alkju'})
        // }
      
      },
       {path:'*', component:parent404}
    ]


})




new Vue({ //router-pam
    router,
    data(){
      return{
        a:'fade'
      }
    },
    template: `<div id="ap">
               <h6>${zyi}</h6>
                <h1>parent</h1>
                <ul>
                  <li><router-link to='/'>/home</router-link> </li>
                  <li><router-link to='/parent'>/parent</router-link> </li>
                  <li><router-link to='/parent987'>/parent错误页面</router-link> </li>
                </ul>
                <transition :name="a" mode="out-in">
                  <router-view></router-view>
                </transition>
              </div>`
              ,watch:{
                '$route'(to,from){
                    if(from.path=='/parent'){
                        this.a="fade"
                    }else{
                      this.a="fade2"
                    }
                }
              }
  }).$mount('#app')